<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <input id="num1" type="text" placeholder="请输入一个数字">
    <select name="" id="sel">
        <option>+</option>
        <option>-</option>
        <option>*</option>
        <option>/</option>
    </select>
    <input id="num2" type="text" placeholder="请输入第二个数字">
    <input id="btn" type="button" value="=">
    <input id="res" type="text">



    <script>


        // select 获取值的时候
        //   option 标签不写value属性       那么获取的就是 option标签里面的值
        //   option 标签加了value属性       那么获取的就是value值  


        // 1 获取相关的对象

        var oNum1 = document.getElementById('num1') ;
        var oSel = document.getElementById('sel') ;
        var oNum2 = document.getElementById('num2') ;
        var oBtn = document.getElementById('btn') ;
        var oRes = document.getElementById('res') ;

        // 2 事件
        oBtn.onclick = function () {  

            // 分别拿到两个输入框的值和符号
            var n1 = oNum1.value ;
            var n2 = oNum2.value ;
            var symbol = oSel.value ;

            if(n1 !== '' && n2 !== '') {
                // 判断正确性

                // n1是数字并且n2也是数字
                if(!isNaN(n1) && !isNaN(n2)) {
                    // 判断符号
                    if(symbol === '+') {
                        oRes.value = n1 * 1 + n2 * 1 ;
                    }
                    else if(symbol === '-') {
                        oRes.value = n1 - n2 ;
                    }
                    else if(symbol === '*') {
                        oRes.value = n1 * n2 ;
                    }
                    else if(symbol === '/') {
                        oRes.value = n1 / n2 ;
                    }
                } else {
                    alert('请输入数字');
                }
            } else {
                alert('输入不能为空');
            }
            

        }

        



    </script>


</body>

</html>